<template>
  <section class="upload-info-section">
    <section class="common-text-block-section"  id="toTop">
      <div class="data-table-content">
        <!-- <span v-if="!needComplete">没有需要完善的项</span> -->
        <div class="receipt-item" v-for="(receiptItem, receiptIndex) in receiptList" :key="receiptIndex">
          <el-card class="box-card">
            <div class="clearfix">
              <span>发票 {{receiptIndex+1}}</span>
            </div>
            <div style="width:60%;  float: left; margin-bottom: 20px; margin-left:30px">
              <el-row v-for="(showItem, showIndex) in showfields" :gutter="20" :key="showIndex">
                <el-col :span="6"><div align="left">{{showItem.title}}: </div></el-col>
                <el-col :span="12"><div align="left"></div>{{receiptItem.receiptInfo[showItem.field]}}</el-col>
              </el-row>
            </div>
            <div style="width:30%; border-left: 1px solid #ddd; padding-left: 12px; padding-bottom:0; margin-bottom:8px; min-width: 380px; border: 1px solid white; float: right">
              <div v-for="(problemItemValue, problemIndex) in receiptItem.problems" :key="problemIndex">
                <div class="card-title"><span>{{format[problemItemValue].title}}</span></div>
                <el-divider></el-divider>
                <div>
                  <el-button size="small" v-for="(selectItem, selectIndex) in format[problemItemValue].selectList"
                    :key="selectIndex" @click="select(receiptIndex, problemIndex, selectItem)"
                    :type="checkSelected(receiptIndex, problemIndex, selectItem)" 
                  >
                    {{selectItem.key}}
                  </el-button>
                </div>
                <div >
                <!-- <div v-if="selectedList[receiptIndex][problemIndex].showTextList != undefined" class="select-input">
                  <div class="suffix" >
                    <el-form ref="form" :model="receiptList[receiptIndex]" label-width="80px">
                      <el-form-item label="支付金额">
                        <el-input v-model="receiptList[receiptIndex].receiptInfo.payAmount"></el-input>
                      </el-form-item>
                      <el-form-item label="支付人">
                        <el-input v-model="receiptList[receiptIndex].receiptInfo.payName"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div> -->
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="suspension">
            
        </div>
      </div>
    </section>
  </section>

</template>

<script>
/**
 * @file 上传模块 / 客户信息纯展示模块
 */

import map from "@/components/map";
import utiles from '@/components/utiles.js';


export default {
  props: {
    clientInfo: {
      type: Object,
    },
  },
  data() {
    return {
        receiptList:[],
        format:{},
        selectedList:[],
        showfields:[
          {field:"id",title:"发票号码"},
          {field:"seller",title:"销售方"}, 
          {field:"goodsType",title:"货物字段"},
          {field:"amount",title:"金额"}, 
          {field:"taxAmount", title:"税额"},
          {field:"date", title:"开票日期"}
        ],
        dynamicClass: "title-section"
    };
  },
  created() {
    this.init();
  },
  mounted(){
     this.init();
  },
  methods: {
    init() {
      this.$http
        .get("/smart/inputReceiptList", {
          params: {
            cName: this.clientInfo.companyName,
            bName: this.clientInfo.bCompanyName,
          },
        })
        .then((res) => {
          if (res.code != 0) {
            return this.$message.error(res.message);
          }
          
          this.receiptList = res.data.receiptList;
          console.log("clientInfo", this.receiptList);
            // this.format = res.data.format;
            // let tmpSelectedList = [];
            // this.receiptList.forEach(function(item, index, arr){
            //   let temp = [];
            //   item.problems.forEach((x, i, a) => {
            //     temp.push([]);
            //   })
            // });
            // this.selectedList = tmpSelectedList;
        });
    },

    select(receiptIndex, problemIndex, selectItem){
      this.receiptList[receiptIndex].receiptInfo[this.getField(selectItem)] = selectItem[this.getField(selectItem)];
      this.selectedList[receiptIndex][problemIndex] = selectItem;
    },

    checkSelected(receiptIndex, problemIndex, selectItem){
      //第receiptIndex张发票的selectItem的键对应的值是否和选中的值相等
      if (this.receiptList[receiptIndex].receiptInfo[this.getField(selectItem)] == selectItem[this.getField(selectItem)]){
        this.selectedList[receiptIndex][problemIndex] = selectItem;
        return "primary"
      }else{
        return ""
      }
    },

    // hasShowTextList(receiptIndex, problemIndex){
    //   return selectItem.showTextList !== undefined;
    // },
    getField(formatItem){
        return Object.keys(formatItem).find(field => {
          return field !== "key" && field !== "showTextList"
        });
    },

  submit(){
    let receiptInfoList = this.receiptList.map(item=>{
      return item.receiptInfo;
    });
    
    let problemMap = {};
    this.receiptList.forEach(item=>{
      problemMap[item.receiptId] = item.problems;
    });
    let completeReq = {
      companyName: this.clientInfo.companyName,
      receiptList: receiptInfoList,
      receiptProblemMap: problemMap
    };
    this.$http.post("/accountBills/saveComplete", completeReq).then((res)=>{
      if (res.code == 0) {
            this.$message.success("保存成功");
            this.$router.back();
      }
    })
  },

  handleScroll () { // 改变元素#searchBar的top值
     var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop// 滚动条距离顶部的距离
      var offsetTop = document.querySelector('#toTop').offsetTop// 4116 元素距离顶部的距离
      var height = document.querySelector('#toTop').offsetHeight;
      
      var titles = document.querySelector('#fixTop')
      if (offsetTop - scrollTop <= 0) { // 当元素到顶部及以上时
      // this.$message.success("height:", height);
        this.dynamicClass = "title-section fixed";
        console.log("dynamicClass:", this.dynamicClass);
        
        
      } else {
        this.dynamicClass = "title-section";
      }
    },
    saveUpdate() {
      const { entryList } = this;
      const currentUser = utiles.getCurrentUser();
      let arrs = [];
      entryList.forEach((v) => {
        const item = arrs.find((i) => i.no === v.no);
        const { date, desc, no, rowSpan, isHigh, ...args } = v;

        if (args.borrowSubjectCode) {
          const borrowItem = map.subjectsList.find(
            (sub) => sub.code === args.borrowSubjectCode
          );
          if (borrowItem) {
            args.borrowSubject = borrowItem.text;
          }
        }
        if (args.loanSubjectCode) {
          const borrowItem = map.subjectsList.find(
            (sub) => sub.code === args.loanSubjectCode
          );
          if (borrowItem) {
            args.loanSubject = borrowItem.text;
          }
        }
        if (item) {
          item.itemList.push(args);
        } else {
          arrs.push({
            no,
            date,
            desc,
            itemList: [args],
          });
        }
      });

      this.$http({
        method: "post",
        url: "/bizInfo/saveAccountingEntity",
        data: {
          isConfirm: false,
          count: arrs.length,
          entryList: arrs,
        },
        params: {
          bName: currentUser.bCompanyName,
          cName: this.clientInfo.companyName,
        },
      }).then((res) => {
        this.$message({
          message: "保存成功",
        });
      });
    },
    onConfirm() {
       const currentUser = utiles.getCurrentUser();
      this.$confirm("确认无误后，将无法再次编辑了, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          method: "post",
          params: {
            bName: currentUser.bCompanyName,
            cName: this.clientInfo.companyName,
          },
          url: "/bizInfo/confirmAccountingEntity",
          data: {
            cName: this.clientInfo.companyName,
          },
        }).then((res) => {
          this.editSwitchValue = false;
          this.$message({
            type: "success",
            message: "确认成功!",
          });
          this.$router.back();
        });
      });
    },
    onBack() {
      this.$router.back();
    },
  },
  components: {
  },
  watch:{
    clientInfo(n,o){
      this.init();
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/var.less";
.upload-info-section {
  display: flex;
  min-height: 600px;
  .common-text-block-section {
    flex: 1;
    margin-bottom: 0;
    .item {
      width: 49%;
    }
  }
  .common-text-block-section ~ .common-text-block-section {
    margin-left: 10px;
  }
  .iconfont::before {
    color: @color-grey-low;
  }
  .upload-info-section {
    display: flex;
    .left,
    .right {
      flex: 1;
    }
    .left span {
      font-size: 14px;
      &.bank {
        color: @color-error;
      }
      &.uploaded {
        color: @color-green;
      }
    }
  }
}
.text-section {
  flex: 1;
}
.title-section {
  display: flex;
  width:100%;
  justify-content: space-between;
  align-items: center;
  .title {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .right {
    display: inline-flex;
    align-items: center;
  }
  .edit-text {
    margin-right: 5px;
  }
}
.fixed{
  position:fixed; top:30px; z-index:9999;
  right:8px;
}
.title-btns {
  margin-right: 20px;
  float:right;
}
.info-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
    width: 80%;
    padding:0;
    margin:0;
    min-width: 1100px;
    margin-bottom: 10px;
    margin-left: 30px;
    box-shadow: 0 0 0 1px #ccc;
}
.el-card_header{
  margin-top: 6px;
  margin-bottom: 6px;
}
.clearfix{
  margin-left:10px;
}

.card-title{
  margin-top: 8px;
  margin-bottom: 2px;
}

.el-col{
  height: 100%;
  margin-bottom: 2px;
}

.suffix{
  height: 100%;
  width: 72%;
}

.select-input{
  margin: 8px;
}

.suspension{
  position: fixed;
}
</style>